<template>
<div>
    <div class="planContent">
        <div class="planBoxTitle">
            <n3-icon type="file-text" size='18px' style="color: #a5a0a0;"></n3-icon>
            <span class="s_fs_16">计划基本信息</span>
        </div>
        <div class="planBoxForm mb30">
            <!-- <div class="list clearfix">
                <div class="w90 s_fc_9  lh32">计划模式</div>
                <div class="fl" >
                    <el-select style="height:32px;"  placeholder="请选择">
                        <el-option
                        v-for="item in planModelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div> -->
            <div class="list clearfix">
                <div class="w90 s_fc_9  lh32">出价方式</div>
                <div class="fl">
                    <el-select v-model="form.type" style="height:32px;"  placeholder="请选择">
                        <el-option v-for="item in priceMOdelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="list clearfix">
                <div class="w90 s_fc_9  lh32">活动类型</div>
                <div class="fl" style="width: 500px;">
                    <!-- <input type="text" style="width:217px;" placeholder="请输入活动" v-model="form.activity"> -->
                    <el-select v-model="form.activity"  style="height:32px;"  placeholder="请选择">
                        <el-option v-for="item in activityTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="list clearfix">
                <div class="w90 s_fc_9  lh32">人&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp群</div>
                <div class="fl" style="width: 500px;">
                    <input type="text" style="width:217px;" placeholder="请输入人群" v-model="form.member">
                    <!-- <el-select v-model="form.activity"  style="height:32px;"  placeholder="请选择">
                        <el-option v-for="item in activityTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>  -->
                </div>
            </div>
            <div class="list clearfix">
                <div class="w90 s_fc_9  lh32">地域设置</div>
                <div class="fl">
                    <n3-radio-group v-model="areaType" type="primary">
                        <n3-radio label="cus">自定义</n3-radio>
                        <n3-radio label="tem">使用模板</n3-radio>
                    </n3-radio-group>
                    <n3-select v-if="areasTem && areaType!='cus'" @click.native="areasTemClick($event)" :multiple='false' width="320px" menu-width="320px" input-placeholder='选择地域模板' v-model="areasTemSel">
                        <template v-for="(val,key) in areasTem">
                            <n3-option :value="val.id">
                                {{ val.template_name }}
                                <span  class="cl" style="float: right; margin-right: 10px; display: none;">		  	 	<span class="n3-fa n3-fa-pencil" :data-id="val.id" :data-name="val.template_name" data-type="update" style="margin-right: 8px;"></span>
                                <span class="n3-fa n3-fa-trash-o" :data-name="val.id" data-type="delete"></span>
                                </span>
                            </n3-option>
                        </template>
                    </n3-select>
                    <div v-show="areaType!='tem'">
                        <areasTem @change="areasTemChange" :options="areasOptions"></areasTem>
                    </div>
                </div>
            </div>
            <div class="list clearfix">
                <div class="w90 s_fc_9  lh32">时段设置</div>
                <div class="fl">
                    <n3-radio-group v-model="timeType" type="primary">
                        <n3-radio label="my">自定义</n3-radio>
                        <n3-radio label="tem">使用模板</n3-radio>
                    </n3-radio-group>
                    <n3-select v-if="timeTem && timeType!='my'" @click.native="timeTemClick($event)" :multiple='false' width="320px" menu-width="320px" input-placeholder='选择地域模板' v-model="timeTemSel">
                        <template v-for="(val,key) in timeTem">
                            <n3-option :value="val.id">
                                {{ val.name }}
                                <span  class="cl" style="float: right; margin-right: 10px; display: none;">		  	 	<span class="n3-fa n3-fa-pencil" :data-id="val.id" :data-name="val.name" data-type="update" style="margin-right: 8px;"></span>
                                <span class="n3-fa n3-fa-trash-o" :data-id="val.id" data-type="delete"></span>
                                </span>
                            </n3-option>
                        </template>
                    </n3-select>
                    <div style="margin-top: 30px;" v-show="timeTem && timeType!='tem'">
                        <timeSlider @change="timeTemChange" :options="timeTemOptions"></timeSlider>
                    </div>
                </div>
            </div>
            <div class="list clearfix">
                <div class="w90 s_fc_9  lh32">投放日期</div>
                <div class="fl">
                    <timeSlot v-model="timeSolt"></timeSlot>
                </div>
            </div>
             <div class="list clearfix" >
                <div class="w90 s_fc_9  lh32" >投放方式</div>
                <div class="fl" style="width: 500px;" >
                    <n3-radio-group   v-model="form.speed_type" type="primary">
                        <n3-radio label="1">尽快投放</n3-radio>
                        <n3-tooltip content="如遇合适流量，预算集中投放。" placement="bottom" trigger="hover">
                            <n3-icon type="question-circle" style="color: #a5a0a0;"></n3-icon>
                        </n3-tooltip>
                        <n3-radio label="2">均匀投放</n3-radio>
                    </n3-radio-group>
                    <n3-tooltip content="全天预算平滑投放。" placement="bottom" trigger="hover">
                        <n3-icon type="question-circle" style="position: relative; vertical-align: middle;top: 1px;color: #a5a0a0;"></n3-icon>
                    </n3-tooltip>
                </div>
            </div>
            <div class="list clearfix">
                <div class="w90 s_fc_9  lh32">每日预算</div>
                <div class="fl">
                    <input class="input w280 input-error" type="number" v-model="form.day_budget">元
                    <div class="ux-valid">
                        <p class="estate error" v-if="form.day_budget==''">
                             <span class="label">请填写每日预算</span>
                        </p>
                        <p class="estate error" v-if="form.day_budget!=''&&(form.day_budget<300 ||form.day_budget>3083.44) ">
                            <span class="label">必须大于 300，小于等于 3083.44元</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-top:10px;">
        <n3-button type="info" @click.native="toPage()">下一步，设置推广单元</n3-button>
        <!-- <n3-button>取消</n3-button> -->
    </div>
</div>
</template>

<style src="./style.css" scoped lang="less"></style>

<script src="./script.js"></script>



























